var prepList = null;
var shopList = null;

$(document).ready(function () {

    var touchEndEvent = "ontouchend" in document ? "touchend" : "mouseup";

    $("#tab-bar a").bind(touchEndEvent, function (e) {
        e.preventDefault();
        var destPage = e.target.hash;
        var nextPage = $(destPage);
        // alert(destPage);
        if (destPage == '#page-settings')
            alert('sssss');
        else if (destPage == '#page-prepare') {
            if (prepList == null) {
                loadPreparedList();
            }
        }
        else if (destPage == '#page-shop')
            loadShopList();
        else
            alert(destPage);

        transition(nextPage, 'fade');

        $("#tab-bar").attr("className", e.target.hash.slice(1));
    });

    //    $("#settings-list li").bind(touchEndEvent, function (e) {
    //        e.preventDefault();
    //        transition("#page-settings", "push");
    //    });
    //    $("#shop-list li").bind(touchEndEvent, function (e) {
    //        e.preventDefault();
    //        transition("#page-shop", "push");
    //    });
    loadPreparedList();
    transition($("#page-prepare"), 'fade');
    
});


function loadPreparedList() {
    $.getJSON("../data/artikelen.txt", function (data) {
        // Got JSON, now template it!
        prepList = data;
        $.each(data, function () {
            addProductToPrepare(this);
        });
    });
}

function loadShopList() {
    if (shopList == null)
    {
        $.getJSON("../data/artikelen.txt", function (data) {
            // Got JSON, now template it!
            shopList = data;
            $.each(data, function () {
                addProductToShop(this);
            });
        });
    } 
}

function addProductToPrepare(product) {
    var newItem = $("#tmpl-simple").clone();
    
    // Now fill in the fields with the data
    newItem.find("h2").text(product.name);
    //newItem.find(".relative-distance").text(this.category);
    newItem.find(".prodCount").attr("value", product.count);

    newItem.find(".prodCount").change(function () {
        alert(this.value);
    });
    // And add the new list item to the page
    newItem.children().appendTo("#prepare-list")
}


function addProductToShop(product) {
    var newItem = $("#tmpl-shop").clone();

    // Now fill in the fields with the data
    newItem.find("h2").text(product.name);
    //newItem.find(".relative-distance").text(this.category);
    newItem.find(".prodLabel").text(product.count);
    
    // And add the new list item to the page
    newItem.children().appendTo("#shop-list");
   // alert('dddd');
}

function transition(toPage, type) {
    var toPage = $(toPage),
    fromPage = $("#pages .current");

    if (toPage.hasClass("current") || toPage === fromPage) {
        return;
    };

    toPage
    .addClass("current " + type + " in")
    .one("webkitAnimationEnd", function () {
        fromPage.removeClass("current " + type + " out");
        toPage.removeClass(type + " in")
    });
    fromPage.addClass(type + " out");

    if (!("WebKitTransitionEvent" in window)) {
        toPage.addClass("current");
        fromPage.removeClass("current");
        return;
    }
}